<!--
  @Descripttion：离线导出任务管理
  @Author：zqy
  @Date：2020-12-08 17:26:06
  @Last Modified by：zqy
  @Last Modified time：2020-12-08 17:26:06
-->
<template>

<el-dialog
  title="离线导出任务"
  top="0vh"
  :visible.sync="innerVisible"
  append-to-body
  fullscreen
  width="100%"
  custom-class="full-screen-dialog"
>
  <div class="qup-full-page">
    <div>
      <search-form :search-config="searchConfig" @search="handleSearch" />
    </div>
    <div class="table-container">
      <table-box
        ref="refTable"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :other-raw="otherRaws"
        :off-set="-20"
        show-index
        :selected-arry.sync="tableSelected"
      >
        <el-table-column fixed="right" label="操作" width="80">
          <template v-slot="{row}">
            <a :href="getDownloadUrl(row.url)" target="_blank" class="btn-green">下载</a>
          </template>
        </el-table-column>
      </table-box>
    </div>
  </div>
</el-dialog>
</template>

<script>
import { parseTime } from '../../ImportFiles/importTask/utils'
export default {
  name: 'ExportTask',
  components: {},
  props: {
    visible:{
      type:Boolean,
      default:false
    },
    downloadPrefix:{
      type:String,
      default:''
    },
    pageApi:{
      type:String,
      default:''
    } // 下载任务分页查询接口地址
  },
  data() {
    return {
      searchConfig: [
        { label: '任务名称', prop: 'taskName', type: 'text' },
        { label: '任务模板', prop: 'taskTemplate', type: 'text' },
        /* {
          label: '任务模板', prop: 'taskTemplate', type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/PUR_ORDER_STATE?appCode=order-center&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }, */
        // 导出状态：上传数据， 校验数据 ， 确认数据 ， 写入数据 ， 已完成 ， 异常
        {
          label: '导出状态', prop: 'taskState',  type:'text'
          /* type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/PUR_ORDER_STATE?appCode=order-center&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          } */
        },
        { label: '菜单路径', prop: 'menuPath', type: 'text' },
        { label: '创建时间', prop: 'createTime', type: 'date', value: [] }
      ],
      otherRaws: {},
      otherFilters: [],
      tableSelected: [], // 当前所选中表格行数据
      tableConfig: {
        interfacePath: `${this.pageApi}`,
        hideFuncBar: true,
        pageSize: 20,
        tabIndex: 0,
        sort: 'createTime',
        order: 'desc',
        setting: [{
          prop: 'domainName',
          label: '业务域',
          minWidth: 120
        },
        {
          prop: 'appName',
          label: '应用名称',
          minWidth: 150
        },
        {
          prop: 'taskName',
          label: '任务名称',
          minWidth: 200
        },
        {
          prop: 'taskTemplate',
          label: '任务模板',
          minWidth: 200,
          type: 'hidden'
        },
        {
          prop: 'menuPath',
          label: '菜单路径',
          minWidth: 200
        },
        {
          prop: 'taskState',
          label: '导出状态',
          minWidth: 120,
          formatData: ({ taskState }) => {
            return taskState // TODO:导出状态
          }
          /* type: 'select',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'order-center',
            dictTypeCode: 'PUR_ORDER_STATE'
          } */
        },
        {
          prop: 'createBy',
          label: '创建人',
          minWidth: 120
        },
        {
          prop: 'createTime',
          label: '创建时间',
          minWidth: 150,
          formatData: ({ createTime }) => {
            return parseTime(createTime, '{y}-{m}-{d} {h}:{i}:{s}')
          }
        }]
      }
    }
  },

  computed: {
    innerVisible:{
      get(){
        return this.visible
      },
      set(val){
        console.log(val)
        this.$emit('update:visible',val)
      }
    }
  },
  created(){
    this.tableConfig.interfacePath=this.pageApi
  },

  methods: {
    // 搜索
    handleSearch(params) {
      this.otherFilters = params.filtersRaw || []
      this.otherRaws = params.paramsRaw || {}
      this.$refs.refTable.initTableData()
    },
    getDownloadUrl(url){
      if (!url || typeof url !== 'string') return ''
      if (!this.downloadPrefix) return url
      const Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
      const objExp = new RegExp(Expression)
      if (objExp.test(url)) {
        return url
      }
      return `${this.downloadPrefix}${url}`
    }
  }
}
</script>
<style lang='scss' scoped>
  .btn-green{
    color:#3DC094;
  }

</style>
